<template>
  <el-select
    style="width: 100%"
    v-model="platformVal"
    clearable
    filterable
    placeholder="请选择平台"
    :multiple="multiple"
  >
    <el-option
      v-for="item in platform"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { getPlatform } from '@/api/public'

const props = defineProps({
  modelValue: { type: [String, Number, Array], default: '' },
  multiple: { type: Boolean, default: false },
})

const emit = defineEmits(['update:modelValue', 'change'])

const platform = ref([])
const platformVal = ref()

onMounted(() => {
  getPlatformReq()
})

watch(
  () => props.modelValue,
  val => {
    platformVal.value = val
  }
)

watch(
  () => platformVal.value,
  val => {
    emit('update:modelValue', val)
    emit('change', val)
  }
)

const getPlatformReq = async () => {
  try {
    const { data } = await getPlatform()
    platform.value = data.map(n => ({
      label: n.platform_name,
      value: n.platform_id,
    }))
  } catch (e) {
    console.error(e)
  }
}
</script>
